<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        :root {
            --size: 100px;
            --size-folder-back: var(--size);
            --size-page-1: calc(var(--size) * 0.55);
            --size-page-2: calc(var(--size) * 0.65);
            --size-folder-front: var(--size);
            --ratio-page-1: 0.95;
            --ratio-page-2: 1.05;
            --ratio-page-2-height: 0.5;
            --ratio-page-2-offset: 0;
            --scale-folder: 1;
            --scale-pages: 0.7;
            --opacity-page-2: 1;
        }

        body {
            background-color: #F4F2F9;
            overflow: hidden;
        }

        .download,
        .folder-back,
        .page-1,
        .page-2,
        .folder-front,
        .background {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .download {
            width: var(--size);
            height: var(--size);
            cursor: pointer;
            filter: drop-shadow(rgba(0, 0, 0, 0.09) 4px 8px 12px) drop-shadow(rgba(0, 0, 0, 0.06) 2px 4px 6px) drop-shadow(rgba(0, 0, 0, 0.03) 1px 2px 3px);
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-tap-highlight-color: transparent;
        }

        .folder-back {
            width: var(--size-folder-back);
            height: var(--size-folder-back);
            transform-origin: 50% 100%;
            transform: translate(-50%, -50%) scaleY(var(--scale-folder));
        }

        .page-1 {
            width: calc(var(--size-page-1) * var(--ratio-page-1));
            height: calc(var(--size-page-1) / var(--ratio-page-1));
            border-radius: 8px;
            background-color: #F2EEF7;
            filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
            transform-origin: 50% 90%;
            transform: translate(-50%, -50%) translateY(calc((1 - var(--scale-pages)) * -65%)) scale(var(--scale-pages));
        }

        .page-2 {
            width: calc(var(--size-page-2) * var(--ratio-page-2));
            height: calc((var(--size-page-2) * var(--ratio-page-2-height)) / var(--ratio-page-2));
            border-radius: 10px;
            background-color: #FFFEFF;
            opacity: var(--opacity-page-2);
            filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
            transform: translate(-50%, -50%) translateY(17%) translateY(calc((1 - var(--scale-pages)) * -85%)) translateY(calc(var(--size) * -1.2 * var(--ratio-page-2-offset))) translateY(calc((1 - var(--ratio-page-2-height)) * -65%)) scale(var(--scale-pages));
        }

        .folder-front {
            width: var(--size-folder-front);
            height: var(--size-folder-front);
            transform-origin: 50% 100%;
            filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
            transform: translate(-50%, -50%) scaleY(calc(var(--scale-folder) * var(--scale-folder)));
        }

        .background {
            opacity: 0.25;
            pointer-events: none;
        }

        .dribbble {
            position: fixed;
            display: block;
            right: 20px;
            bottom: 20px;
        }

        .dribbble img {
            display: block;
            height: 28px;
        }

        .twitter {
            position: fixed;
            display: block;
            right: 64px;
            bottom: 14px;
        }

        .twitter svg {
            width: 32px;
            height: 32px;
            fill: #1da1f2;
        }
    </style>
</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script>
    <!--
  Inspired by Alex Bender
-->
    <div class="download">
        <svg class="folder-back" viewBox="0 0 48 48">
            <path d="
      M  3.50  7.50
      C  3.50  5.29   5.28  3.50   7.49  3.50
      C 13.17  3.50  23.18  3.50  26.00  3.50
      C 30.00  3.50  28.00  6.00  32.00  6.00
      C 34.21  6.00  37.87  6.00  40.71  6.00
      C 42.93  6.00  44.73  7.82  44.71 10.04
      L 44.54 25.04
      C 44.52 27.24  42.74 29.00  40.54 29.00
      H  7.50
      C  5.29 29.00   3.50 27.21   3.50 25.00
      V  7.50
      Z
    " fill="#32AF75" />
        </svg>
        <div class="page-1"></div>
        <div class="page-2"></div>
        <svg class="folder-front" viewBox="0 0 48 48">
            <defs>
                <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" style="stop-color:#47DB99;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#2EA16D;stop-opacity:1" />
                </linearGradient>
            </defs>
            <path d="
      M  2.36 24.31
      C  2.17 23.09   3.11 22.00   4.34 22.00
      H 40.90
      C 41.80 22.00  42.33 23.00  41.83 23.75
      L 41.40 24.40
      C 41.16 24.76  41.16 25.24  41.40 25.60
      V 25.60
      C 41.73 26.10  42.40 26.23  42.90 25.90
      L 43.50 25.50
      V 25.50
      C 44.75 24.88  46.17 25.93  45.94 27.31
      L 43.57 41.17
      C 43.24 43.09  41.57 44.50  39.63 44.50
      H  8.93
      C  6.95 44.50   5.28 43.06   4.97 41.11
      L  2.36 24.31
      Z
    " fill="url(#gradient)" />
        </svg>
    </div>

    <!-- background -->
    <svg class="background" width="800" height="600" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
            d="M145.794 161.461l-.597 15.577c-.059 1.538-1.762 2.436-3.065 1.615l-13.191-8.305c-1.303-.821-1.229-2.744.133-3.462l13.788-7.271c1.362-.718 2.991.307 2.932 1.846zm541.372 173.611l-14.19 6.452c-1.402.637-2.968-.482-2.819-2.015l1.508-15.515c.149-1.532 1.901-2.329 3.153-1.434l12.683 9.064c1.253.895 1.067 2.81-.335 3.448z"
            stroke="#000" stroke-opacity=".25" stroke-width="2" />
        <rect x="371.383" y="71.127" width="18" height="18" rx="2" transform="rotate(13.677 371.383 71.127)"
            stroke="#000" stroke-opacity=".25" stroke-width="2" />
        <rect x="189.25" y="411.352" width="18" height="18" rx="2" transform="rotate(62.035 189.25 411.352)"
            stroke="#000" stroke-opacity=".25" stroke-width="2" />
        <circle cx="625" cy="531" r="2" fill="#000" fill-opacity=".25" />
        <path
            d="M597.914 89.594a1 1 0 10-1.828.812l1.828-.812zm-5.241 28.467a.998.998 0 101.654-1.122l-1.654 1.122zM597 90l-.914.406.003.006.01.024.044.104a26.42 26.42 0 01.696 1.88c.402 1.23.831 2.839.978 4.422.149 1.61-.01 3.036-.616 4.027-.552.905-1.593 1.631-3.701 1.631v2c2.642 0 4.414-.961 5.408-2.588.941-1.54 1.064-3.49.9-5.254-.166-1.792-.643-3.558-1.068-4.86a29.717 29.717 0 00-.753-2.034l-.052-.123a.41.41 0 01-.015-.033l-.004-.01-.001-.002-.001-.002L597 90zm-3.5 12.5c-1.301 0-2.384.239-3.235.74a3.843 3.843 0 00-1.72 2.126c-.558 1.646-.16 3.672.446 5.455.622 1.835 1.546 3.646 2.303 4.984a40.667 40.667 0 001.265 2.086l.082.124.023.033a.035.035 0 00.006.009l.002.003v.001l.828-.561.828-.561-.001-.002-.004-.006-.018-.026-.073-.111a37.75 37.75 0 01-1.197-1.974c-.729-1.287-1.585-2.976-2.15-4.641-.583-1.717-.778-3.191-.446-4.17.152-.447.414-.794.841-1.046.448-.264 1.146-.463 2.22-.463v-2zM375.165 480.285a1 1 0 10-.761-1.849l.761 1.849zm-28.521 3.616a1 1 0 001.755.961l-1.755-.961zm28.141-4.54l-.38-.925v-.001.001l-.003.001-.019.007-.084.033a17.822 17.822 0 01-1.599.509c-1.065.285-2.493.569-3.988.588-1.499.02-3.001-.228-4.27-.945-1.243-.702-2.34-1.897-2.989-3.933l-1.906.608c.794 2.489 2.205 4.102 3.911 5.066 1.68.95 3.568 1.226 5.28 1.204 1.715-.022 3.317-.345 4.479-.656a19.94 19.94 0 001.796-.573l.108-.042a.917.917 0 00.03-.012l.009-.004.003-.001h.002l-.38-.925zm-13.332-4.665c-.393-1.232-.964-2.185-1.791-2.728-.874-.573-1.843-.566-2.727-.268-.854.287-1.691.861-2.467 1.537-.786.685-1.568 1.527-2.309 2.421-1.483 1.788-2.862 3.851-3.864 5.455a70.7 70.7 0 00-1.531 2.574l-.088.157-.023.041a.066.066 0 00-.006.012l-.002.003v.001l.876.48.878.481v-.001l.001-.002.005-.008.02-.037.082-.148a67.899 67.899 0 011.485-2.493c.98-1.57 2.305-3.549 3.706-5.238.701-.844 1.406-1.599 2.084-2.19.688-.6 1.294-.982 1.792-1.15.468-.157.761-.105.991.046.278.182.654.632.982 1.663l1.906-.608z"
            fill="#000" fill-opacity=".25" />
    </svg>

    <script>
        const download = document.querySelector('.download');
        const background = document.querySelector('.background');
        const folderFront = document.querySelector('.folder-front');
        const size = gsap.getProperty(download, '--size');

        const playspeed = 1;

        const keyframes = [
/*  0 */0.00, //s
/*  1 */0.20, //s
/*  2 */0.27, //s
/*  3 */0.35, //s
/*  4 */0.55, //s
/*  5 */2.00 //s
        ];

        const timespan = (start, end) => ({
            delay: keyframes[start] * (1 / playspeed),
            duration: (keyframes[end] - keyframes[start]) * (1 / playspeed)
        });


        const handleClick = () => {
            const page = document.createElement('div');
            page.classList.add('page-2');
            download.insertBefore(page, folderFront);

            /* Page */
            // Fall
            gsap.fromTo(page, {
                '--ratio-page-2-offset': 1,
                '--ratio-page-2-height': 1
            },
                {
                    '--ratio-page-2-offset': 0,
                    ...timespan(0, 3),
                    onComplete: () => {
                        page.remove();
                    }
                });

            // Fade in
            gsap.fromTo(page, {
                '--opacity-page-2': 0
            },
                {
                    '--opacity-page-2': 1,
                    ...timespan(0, 1)
                });

            // Height
            gsap.to(page, {
                '--ratio-page-2-height': 0.5,
                ...timespan(2, 3)
            });


            /* Pages */
            // Scale
            gsap.fromTo(download, {
                '--scale-pages': 1
            },
                {
                    '--scale-pages': 0.8,
                    ...timespan(3, 4)
                });

            gsap.to(download, {
                '--scale-pages': 1,
                ease: 'elastic',
                ...timespan(4, 5)
            });


            /* Folder */
            // Scale
            gsap.fromTo(download, {
                '--scale-folder': 1
            },
                {
                    '--scale-folder': 1.12,
                    ...timespan(3, 4)
                });

            gsap.to(download, {
                '--scale-folder': 1,
                ease: 'elastic',
                ...timespan(4, 5)
            });


            /* Background */
            // Scale
            gsap.fromTo(background, {
                scale: 1
            },
                {
                    scale: 1.1,
                    ease: 'sine.inOut',
                    ...timespan(3, 4)
                });

            gsap.to(background, {
                scale: 1,
                ease: 'elastic',
                ...timespan(4, 5)
            });

        };

        download.addEventListener('click', handleClick);
        handleClick();
    </script>
</body>

</html>